import React from 'react';
import { Button } from 'antd';

import './index.less';

export default (props) => {
  const {
    loading = false,
    firstTitle = '',
    secondTitle = '',
    thirdTitle = '',
    description = '',
    cancelName = '返回',
    okName = '确定',
    onCancel,
    onOk
  } = props;
  return (
    <div className="custom-modal">
      <div className="custom-modal-left">
        {firstTitle && <div className="custom-modal-firstTitle" dangerouslySetInnerHTML={{ __html: firstTitle }} />}
        {secondTitle && <div className="custom-modal-secondTitle" dangerouslySetInnerHTML={{ __html: secondTitle }} />}
        {thirdTitle && <div className="custom-modal-thirdTitle" dangerouslySetInnerHTML={{ __html: thirdTitle }} />}
        {description && <div className="custom-modal-description" dangerouslySetInnerHTML={{ __html: description }} />}
      </div>
      <div className="custom-modal-right">
        <div className="custom-modal-main">
          {props.children}
        </div>
        <div className="custom-modal-footer">
          <Button className="custom-modal-cancel" onClick={onCancel}>{cancelName}</Button>
          <Button className="custom-modal-ok" type="primary" loading={loading} onClick={onOk}>{okName}</Button>
        </div>
      </div>
    </div>
  );
}
